<template>
    <div>
        <div class="container">
            <svg width="500" height="200" viewBox="0 0 500 200">
<!--                <rect x="0" y="0" width="100" height="50" fill="red" transform="translate(10, 10) scale(0.5)"></rect>-->
                <!--
                  (135)[2,-1,50] => 2*x + (-1)*y + 50 = newX
                  (246)[1,2,0]  => 1*x + 2*y + 0 = newY
                  顶点坐标
                  [0,0]
                  [100,0]
                  [100,50]
                  [0,50]
                 transform="matrix(2 1 -1 2 50 0)"
                -->
                <rect
                    class="rect"
                    x="5"
                    y="5"
                    width="100"
                    height="50"
                    fill="none"
                    stroke="blue"
                    stroke-width="5"
                />
            </svg>
        </div>
        <div class="container">
            <svg width="440" height="440" viewBox="0 0 440 440">
              <circle cx="220" cy="220" r="200" stroke-width="20" stroke="#d1d3d7" fill="none"></circle>
              <circle class="circle" cx="220" cy="220" r="200" stroke-width="20" stroke="#00a5e0" fill="none"
              transform="matrix(0 -1 1 0 0 440)"
              ></circle>
            </svg>
        </div>
      <div class="contianer">
        <svg viewBox="0 0 1024 1024" width="200" height="200">
          <path class="logo" d="M516.5 824.3c-7.7 0-15.4-1.9-22.1-5.7l-0.5-0.3c-2-1.2-3.7-2.4-5.3-3.6l-8.1-5.9c-18.7-13.6-68.2-49.5-100.6-75.7C255.6 632 191.6 557.8 178.6 499.6c-6-19.3-9.5-42.8-9.8-65.8-0.8-63.2 22.2-124.4 63.1-167.9 37.9-40.3 87.7-62.6 140.4-62.8 51.8 0 99.9 19.1 137.6 54.1 37.1-36.6 84.8-56.8 136.5-57.5h3.9c111.5 0 203.5 101.1 205 225.3 0.2 15.8-12.5 28.8-28.3 29-15.7 0.2-28.8-12.5-29-28.3-1.2-93.1-67.5-168.8-147.8-168.8h-3.5c-40.9 0.5-78.9 19-106.6 51.8-7.2 8.5-17.6 13.6-28.6 13.9-11.4 0.5-22.5-4.3-30.4-13.1-28.3-31.7-66.9-49.2-108.7-49.2-36.7 0.1-71.8 16-98.8 44.8-30.9 32.8-48.2 79.4-47.6 128 0.2 17.8 2.8 35.5 7.4 50 0.4 1.4 0.7 2.5 1 3.6 6.5 29.9 43.3 89.4 181.6 201.9 31.2 25.2 79.8 60.6 98.2 73.9l2.7 2c25.1-17.4 57.9-43.5 97.8-77.9 12-10.3 30-9 40.3 3 10.3 12 9 30-3 40.3-45.7 39.4-83 68.7-110.7 87.1-7.3 4.9-16 7.3-24.8 7.3z m-28.5-10s0.1 0.1 0.2 0.1c-0.1 0-0.1-0.1-0.2-0.1z m21.6-45c-0.1 0-0.1 0.1-0.2 0.1 0.1 0 0.2 0 0.2-0.1zM178.4 498.8v0z m345.3-227.4s0.1 0 0 0c0.1 0 0 0 0 0z" p-id="979"></path>
          <path class="logo" d="M510.8 617.3c-4.8 0-9.6-1.2-13.9-3.6l-0.5-0.3c-1.1-0.7-2-1.3-2.8-1.9l-2.5-1.8c-9.5-6.9-23.4-17.1-33.1-25-43-35-64.6-60.6-69.8-82.7-2.3-7.4-3.5-16-3.6-24.8-0.3-23.9 8.5-47.2 24.1-63.9 14.9-15.8 34.5-24.6 55.4-24.6h0.1c16.1 0 31.3 4.7 44.3 13.5 12.9-9.3 28.1-14.4 44.3-14.7h1.4c43.6 0 79.5 38.8 80.1 86.5 0.1 8.9-1 17.4-3.2 25.6-4.5 21.8-25.4 47.8-67.4 83.8-15.2 13.1-27.7 23-37.2 29.2-4.8 3.1-10.3 4.7-15.7 4.7z m10.6-42.2l0.5 0.4c-0.1-0.1-0.3-0.2-0.5-0.4z m-20.4-0.7c-0.1 0-0.2 0.1-0.2 0.2 0.1-0.1 0.2-0.1 0.2-0.2z m-37-140c-8.1 0-16 3.7-22.2 10.2-7.6 8.1-11.9 19.7-11.7 32 0 4.4 0.7 8.9 1.8 12.3l0.6 2.3c0.8 3.9 7.3 19.6 54.1 57.8 7 5.6 16.9 13 24.1 18.3 5.6-4.3 13.1-10.3 22.8-18.7 48-41.1 52.2-56.9 52.5-58.5l0.4-1.8c1.3-4.6 1.9-9.1 1.8-13.7-0.3-22.3-16-41.2-34.3-41.2h-1.1c-9.2 0.1-17.7 4.3-24.2 12-4.8 5.7-11.7 9.1-19.2 9.3-7.8 0.4-15.3-2.9-20.6-8.8-6.4-7.5-15-11.5-24.8-11.5z m29.8-18.7c0 0.1 0 0.1 0 0 0 0.1 0 0.1 0 0z m29.4-0.4z" p-id="980"></path>
        </svg>
      </div>
    </div>
</template>

<script>
import { onMounted } from 'vue'
    export default {
      name: 'SvgAnimation',
      setup() {
        onMounted(() => {
          const logo = document.getElementsByClassName('logo')[0]
          console.log(logo.getTotalLength())
        })
      }
    }
</script>
<style lang="scss" scoped>
.container {
    svg {
        border: 1px solid #000;
    }
}
.rect {
  stroke-dasharray: 10 20 30;
}
.circle {
  animation: circle 5s linear infinite;
}

@keyframes circle {
  from {
    stroke-dasharray: 0 1257;
  }
  to {
    stroke-dasharray: 1257 0;
  }
}
.logo {
  fill: none;
  stroke: #333;
  stroke-width: 5;
  animation: logo 5s linear forwards;
}
@keyframes logo {
  0% {
    fill: white;
    stroke-dasharray: 3278;
    stroke-dashoffset: 3278;
  }
  50% {
    fill: white;
    stroke-dasharray: 3278;
    stroke-dashoffset: 0;
  }
  75% {
    fill: red;
  }
  100% {
    fill: yellow;
  }
}
</style>
